<!-- 歌曲组件 -->
<template>
  <div class="songlist">
    <!-- 歌曲信息的每一列 -->
    <el-table :data="props.songlist" stripe style="width: 100%">
      <!-- 歌曲前面的索引 -->
      <el-table-column type="index" width="50" :index="indexMethod" />
      <!-- 下载按钮 -->
      <el-table-column width="80">
        <el-icon :size="18">
          <Download />
        </el-icon>
      </el-table-column>
      <!-- 音乐标题 -->
      <el-table-column prop="name" label="音乐标题" min-width="140" />
      <!-- 歌手 -->
      <el-table-column prop="ar[0].name" label="歌手" min-width="120">
        <template #default="scope">
          <span v-for="(item, index) in scope.row.ar" :key="item.id">
            <!-- 歌手名字 -->
            <span @click="toSingerDetails(item.id)">{{ item.name }}</span>
            <!-- 最后一个歌手后面不加分隔符 -->
            <span v-if="index != scope.row.ar.length - 1">/</span>
          </span>
        </template>
      </el-table-column>
      <!-- 专辑 -->
      <el-table-column prop="al.name" label="专辑"  min-width="120">

      </el-table-column>
      <!-- 时长 -->
      <el-table-column prop="dt" label="时长">
        <template #default="scope">
          <span>{{ msToMinSeconed(scope.row.dt) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import router from '../../router';
import { msToMinSeconed } from '../../utils/time'
const props = defineProps({
  songlist:Array,
})


// watchEffect(()=>{
// 同步异步问题导致第一次打印值为undefined
//   console.log(props.songlist);
// })

// 歌曲前面的索引
const indexMethod = (index: number) => {
  return index + 1
}

// 点击歌手跳转歌手详情页面
function toSingerDetails(id:number) {
  router.push({
    name:"singerDetails",
    params:{ id }
  })
}

</script>

<style lang="less">
.songlist {
  cursor: pointer;

  .el-table {
    font-size: 13px;
  }
}
</style>